<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 移动方向 -->
			<pj-demo title="移动方向">
				<pure-radio-group v-model="direction">
					<pure-radio
						class="radio"
						label="四周"
						value="all"
						theme="primary"
						ghost
					></pure-radio>
					<pure-radio
						class="radio"
						label="横向"
						value="horizontal"
						theme="primary"
						ghost
					></pure-radio>
					<pure-radio
						class="radio"
						label="纵向"
						value="vertical"
						theme="primary"
						ghost
					></pure-radio>
					<pure-radio
						class="radio"
						label="禁止"
						value="none"
						theme="primary"
						ghost
					></pure-radio>
				</pure-radio-group>
			</pj-demo>

			<!-- 自定义图标 -->
			<pj-demo title="自定义图标">
				<pure-radio-group v-model="iconName">
					<pure-cell>
						<pure-radio
							label="__home"
							value="__home"
							theme="success"
							ghost
						></pure-radio>
						<pure-gap
							inline
							size="20px"
						></pure-gap>
						<pure-radio
							label="__loading"
							value="__loading"
							theme="success"
							ghost
						></pure-radio>
					</pure-cell>
				</pure-radio-group>
			</pj-demo>

			<!-- 显示文字 -->
			<pj-demo title="显示文字">
				<pure-cell title="是否显示文字">
					<template #desc>
						<pure-switch v-model="isText"></pure-switch>
					</template>
				</pure-cell>
			</pj-demo>

			<pure-float-bubble
				:direction="direction"
				:text="text"
				:iconName="iconName"
			></pure-float-bubble>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";

	// 移动方向
	const direction = ref("all");

	// 图标
	const iconName = ref("__home");

	// 文字
	const isText = ref(false);
	const text = computed(() => {
		if (isText.value) return "主页";
		return "";
	});
</script>

<style lang="scss" scoped>
	.radio {
		--pure-radio-display: flex;
		--pure-radio-flex-direction: row-reverse;
		width: 100%;
		background: var(--pure-background-default);
		padding: 12px 16px;
		border-radius: var(--pure-radius-default);
	}
</style>
